﻿import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Layouts 1.2
import QtQuick.Controls.Styles 1.2
import QtQuick.Controls 2.12
import QtMultimedia 5.14

Item {
    id: root
    readonly property real dp: config.dp
    property string title: ""
    property string name1: ""
    property string name2: ""
    property string name3: ""
    width: 210*dp
    height: 80*dp

    // 边框
    Rectangle {
        anchors.fill: parent
        radius: 8
        border.color: "#1677FF"
        border.width: 1
        color: "transparent"
        z: 10
    }

    // 内容区域
    Item {
        id: contentArea
        anchors {
            left: parent.left
            right: parent.right
            top: parent.top
            bottom: parent.bottom
        }

        // 顶部标题区域
        Rectangle{
            x:0*dp
            y:0*dp
            width: contentArea.width
            height: contentArea.height*3/8
            color: "#F4F4F4"

            Text {
                text: title
                font.pixelSize: 15
                anchors.centerIn: parent
                color: "#222222"
            }
        }

        // 水平分隔线
        Rectangle{
            x:0*dp
            y:contentArea.height*3/8
            width: contentArea.width
            height: 1*dp
            color: "#1677FF"
            z:10
        }

        // 垂直分隔线
        Rectangle{
            x:contentArea.width/3-0.5*dp
            y:contentArea.height*3/8
            width: 1*dp
            height: contentArea.height*5/8
            color: "#1677FF"
            z:10
        }
        // 垂直分隔线
        Rectangle{
            x:contentArea.width/3*2-0.5*dp
            y:contentArea.height*3/8
            width: 1*dp
            height: contentArea.height*5/8
            color: "#1677FF"
            z:10
        }

        // 左侧按钮
        CustomButton{
            title: name1
            x:0*dp
            y:contentArea.height*3/8
            width: contentArea.width/3
            height: contentArea.height*5/8
            radius: 0
            onReleased: {
                bt1()
            }
        }

        // 中侧按钮
        CustomButton{
            title: name2
            x:contentArea.width/3
            y:contentArea.height*3/8
            width: contentArea.width/3
            height: contentArea.height*5/8
            radius: 0
            onReleased: {
                bt2()
            }
        }
        // 右侧按钮
        CustomButton{
            title: name3
            x:contentArea.width/3*2
            y:contentArea.height*3/8
            width: contentArea.width/3
            height: contentArea.height*5/8
            radius: 0
            onReleased: {
                bt3()
            }
        }
    }

    signal bt1()
    signal bt2()
    signal bt3()
}
